<script setup lang="ts">

import AppWrap from "@/components/app-wrap/index.vue";
</script>

<template>
  <app-wrap>
    <div class="custom">
      <!--<img class="bg" src="../../assets/images/home/2.jpg">-->
      <div class="cell btns">
        <div class="cell-bd btn">
          <img src="../../../assets/images/home/4.png">
          <span>用户</span>
        </div>
        <div class="cell-hd line" />
        <div class="cell-bd btn active">
          <img src="../../../assets/images/home/5.png">
          <span>用户</span>
        </div>
      </div>
    </div>
  </app-wrap>
</template>

<style scoped lang="scss">
.custom{
  width: 100%;
  height: 1348px;
  overflow: hidden;
  position: relative;
  background: #aaa;
  .bg{
    position: relative;
    height: 100%;
  }
  .btns{
    position: absolute;
    bottom: 117px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    //阴影
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    .btn{
      position: relative;
      width: 357px;
      height: 80px;
      color: #757575;
      text-align: center;
      line-height: 80px;
      font-size: 0;
      cursor: pointer;
      img{
        display: inline-block;
        width: 49px;
        height: 49px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
      span{
        display: inline-block;
        line-height: 80px;
        vertical-align: top;
        padding-left: 20px;
        font-size: 31px;
      }
      &.active{
        color: #126EF8;
      }
      &:hover{
        background: #f5f5f5;
        span{
          color: #126EF8;
        }
      }
    }
    .line{
      width: 2px;
      height: 74px;
      background: #C6D2DE;
    }
  }
}
</style>
